﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>垂直轮播图（原创）</title>
<script src="../js/jquery.min.js"></script>
<style>
 body {
	margin:0px;
	padding:0px;
	color:#FFFFFF;
}
.maindiv {
	position:absolute;
	width:100%;
	height:100%;
	overflow:auto;
}
.radiodiv {
	position:absolute;
	bottom:30%;
	right:20px;
	display:inline-table;
	text-align:right;
}
.contentdiv {
	position:absolute;
	width:100%;
	height:100%;
	color:#999999;
	background-color:#333333;
}
#contentdiv1 {
	top:0%;
	background-color:#000000;
}
#contentdiv2 {
	top:100%;
	background-color:#333333;
}
#contentdiv3 {
	top:200%;
	background-color:#666666;
}
#contentdiv4 {
	top:300%;
	background-color:#999999;
}
#contentdiv5 {
	top:400%;
	background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="maindiv" class="maindiv">

    <div id="contentdiv1" class="contentdiv">1</div>
    <div id="contentdiv2" class="contentdiv">2</div>
    <div id="contentdiv3" class="contentdiv">3</div>
    <div id="contentdiv4" class="contentdiv">4</div>
    <div id="contentdiv5" class="contentdiv">5</div>

</div>

<div id="radiodiv" class="radiodiv">
    <input type="radio" id="radio1" onmouseenter="showScreen(1);" name="radio" value="1" checked="checked">
    <br><br><input type="radio" id="radio2" onmouseenter="showScreen(2)" name="radio" value="2">
    <br><br><input type="radio" id="radio3" onmouseenter="showScreen(3)" name="radio" value="3">
    <br><br><input type="radio" id="radio4" onmouseenter="showScreen(4)" name="radio" value="4">
    <br><br><input type="radio" id="radio5" onmouseenter="showScreen(5)" name="radio" value="5">
    <br><br>
    <div id="informationdiv"></div>
</div>

<script>
 function $(id) {
     return document.getElementById(id);
 }

 //浏览器窗口高度
 var windowHeight = 900;
 var currentN = 1;
 var currentTop = 0;
 var scrollDirection = 1;
 var clock;

 window.onresize = function() {
     windowHeight = document.documentElement.clientHeight;
 }

 window.onload = function() {

     //获取浏览器窗口高度
     windowHeight = document.documentElement.clientHeight;


     //主显DIV滚动事件处理
     $("maindiv").onscroll = function() {

         //获取当前滚动的顶线位置
         var tempTop = $("maindiv").scrollTop;

         //计算当前在第几个主画面
         n = Math.round(tempTop / windowHeight) + 1;

         radio(n);

         //判断滚动方向
         if (tempTop > currentTop) {
             scrollDirection = 1;
         } else if (tempTop < currentTop) {
             scrollDirection = -1;
         }

         //滑动动画			
         clearInterval(clock);
         clock = setInterval(animation, 1);

         //每次滚动完毕将位置存入变量以供比较判断滚动方向
         currentTop = $("maindiv").scrollTop;

         //$("informationdiv").innerHTML="方向"+scrollDirection+" "+n+"th screen "+"scroll top of maindiv"+currentTop+" window height:"+windowHeight;		

     }
 }

 //选中第n个radio
 function radio(n) {
     $("radio" + n).checked = "true";
 }

 //点选RADIO后直接跳转至第n屏
 function showScreen(n) {
     radio(n);
     var targetTop = (n - 1) * windowHeight;
     $("maindiv").scrollTop = targetTop;
 }

 //分屏滑动动画效果
 function animation() {

     if (scrollDirection == 1) {
         //上行
         if ($("maindiv").scrollTop % windowHeight != 0) {
             $("maindiv").scrollTop += 1;
         } else {
             clearInterval(clock);
         }
     }

     if (scrollDirection == -1) {
         //下行			
         if ($("maindiv").scrollTop % windowHeight != 0) {
             $("maindiv").scrollTop -= 1;
         } else {
             clearInterval(clock);
         }
     }


 }
</script>

</body>
</html>
